<template>
  <div class="default-main ba-table-box">
    <el-alert class="ba-table-alert"
              v-if="baTable.table.remark"
              :title="baTable.table.remark"
              type="info"
              show-icon />

    <!-- 表格顶部菜单 -->
    <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                 :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
      <template #shop>
        <el-select filterable
                   v-model="baTable.comSearch.form['shop_id']"
                   clearable>
          <el-option v-for="item in shop_arr"
                     :key="item.shop_id"
                     :label="item.shop_name"
                     :value="item.shop_id">
          </el-option>
        </el-select>
      </template>
    </TableHeader>

    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="table" />

    <!-- 表单 -->
    <PopupForm />
  </div>
</template>

<script setup lang="ts">
import { provide, ref, onBeforeMount } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'
import { getShopList } from '/@/api/backend/common'

defineOptions({
    name: 'shop/shop',
})

const { t } = useI18n()
const table: any = ref<InstanceType<typeof Table>>()
const adminInfo = useAdminInfo()
const shop_arr = ref([] as any[])

const optButtons = defaultOptButtons([ 'edit', 'delete'])
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}

const baTable = new baTableClass(
    new baTableApi('/shop/shop/'),
    {
        ref: table,
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('Id'), prop: 'id', align: 'center', operator: false, operatorPlaceholder: t('Id'), width: 70 },
            {
                label: '店铺',
                prop:  'shop_id',
                operator: 'LIKE', 
                comSearchRender:'slot',
                comSearchSlotName: 'shop',
                show: false
            },
            {   
                label: '店铺', 
                prop: 'shop_name', 
                align: 'center',
                operator: false
            },
            { label: t('shop.shop.region'), prop: 'region', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('shop.shop.seller_type'), prop: 'seller_type', align: 'center', operator: false, render: 'tags' },
            {   
                label: '运营', 
                prop: 'user_name', 
                align: 'center',
                operator: false
            },
            {   
                label: '状态', 
                prop: 'status', 
                align: 'center',
                render: 'tag',
                replaceValue: { 'normal': '正常', 'hidden': '冻结'},
                operator: false
            },
            {
                label: t('Operate'),
                align: 'center',
                width: 100,
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            },
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()?.then(() => {
    baTable.dragSort()
})

const getShopArr = () => {
    getShopList().then(res => {
        if(res.data && res.data.list.length) {
            shop_arr.value = res.data.list
        }
    })
}

onBeforeMount(() => {
    getShopArr()
})

</script>

<style scoped lang="scss"></style>
